<template>
  <a-modal
    v-model:open="visible"
    title="特殊折扣设置"
    width="500px"
    @cancel="handleCancel"
  >
    <div class="batch-discount-content">
      <div class="selected-info">
        <p>已选择 {{ selectedProducts.length }} 个商品</p>
        <p class="card-info">当前会员卡类型：{{ getCardTypeName() }}</p>
      </div>

      <a-form layout="vertical">
        <a-form-item label="折扣" name="discount" required>
          <div class="discount-input-container">
            <a-input-number
              v-model:value="formData.discount"
              placeholder="请输入1-10的数字"
              style="width: 100%"
              :min="1"
              :max="10"
              :precision="1"
              :step="0.1"
            />
            <div class="discount-help">
              <span class="help-text"
                >*如不填写特殊折扣,则默认为会员卡折扣</span
              >
              <a-tooltip
                title="折扣值说明：10=不打折，9.5=九五折，9.0=九折，以此类推"
              >
                <a-icon type="question-circle" class="help-icon" />
              </a-tooltip>
            </div>
          </div>
        </a-form-item>
      </a-form>
    </div>

    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="saving" @click="handleSave">
          保存
        </a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { message } from 'ant-design-vue';

// 定义props
interface Props {
  visible: boolean;
  selectedProducts: string[];
  cardType: string;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  selectedProducts: () => [],
  cardType: 'gold',
});

// 定义emits
const emit = defineEmits<{
  'update:visible': [value: boolean];
  save: [discount: number]
}>();

// 响应式数据
const saving = ref(false);

// 表单数据
const formData = reactive({
  discount: 0,
});

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

// 方法
const getCardTypeName = () => {
  const cardTypeMap: Record<string, string> = {
    gold: '金卡',
    silver: '银卡',
    normal: '普通卡',
  };
  return cardTypeMap[props.cardType] || props.cardType;
};

const handleSave = async () => {
  if (formData.discount === 0) {
    message.warning('请输入折扣值');
    return;
  }

  if (formData.discount < 1 || formData.discount > 10) {
    message.warning('折扣值必须在1-10之间');
    return;
  }

  try {
    saving.value = true;
    // 模拟保存请求
    await new Promise((resolve) => setTimeout(resolve, 1000));

    emit('save', formData.discount);
    message.success('批量修改成功');
    visible.value = false;
  } catch (error) {
    message.error('保存失败');
  } finally {
    saving.value = false;
  }
};

const handleCancel = () => {
  visible.value = false;
  resetForm();
};

const resetForm = () => {
  formData.discount = 0;
};
</script>

<style scoped>
.batch-discount-content {
  padding: 16px 0;
}

.selected-info {
  margin-bottom: 24px;
  padding: 12px;
  background: #f0f9ff;
  border-left: 4px solid #1890ff;
  border-radius: 4px;
}

.selected-info p {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #333;
}

.card-info {
  color: #1890ff;
  font-weight: 500;
}

.discount-input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.discount-help {
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-text {
  font-size: 12px;
  color: #666;
}

.help-icon {
  color: #1890ff;
  cursor: pointer;
}
</style>
